import { Component } from 'react';
import { Search } from 'react-vant';
import { getHotcate, getHotList } from '../../api/home'
import Lazyimg from 'react-lazyimg-component';
import loadingImg from '../../assets/loading.png'
import './index.less'
import WithRouter from '../../router/withRouter'
class Search1 extends Component {
    state = {
        keyword: '',
        hotcate: [],
        hotlist: []
    }
    render() {
        let { keyword, hotcate, hotlist } = this.state
        return (
            <div className='search1'>
                <div>
                    <Search value={keyword} onChange={(value) => {
                        this.setState({
                            keyword: value
                        })
                    }} placeholder="请输入搜索关键词" />
                </div>
                <div className='hotcate'>
                    <p className='hot'>热门搜索</p>
                    <div className='hotlist'>
                        {
                            hotcate.length !== 0 && hotcate.map((item, index) => {
                                return (
                                    <div key={index} className='hotitem'>
                                        {item.title}
                                    </div>
                                )
                            })
                        }
                    </div>
                </div>
                <div className='hoo'>
                    <p className='ree'>热门推荐</p>
                    <div>
                        {
                            hotlist.length !== 0 && hotlist.map((item, index) => {
                                return (
                                    <div className="goods_item" key={index} onClick={() => {
                                        this.props.router.navigate('/info/' + item.id)
                                    }}>
                                        <div className="item_img">
                                            <Lazyimg className="lazy_img" src={item.image} placeholder={<img src={loadingImg} alt='加载失败' />} />
                                        </div>
                                        <div className="item_info">
                                            <div className="name">
                                                {
                                                    item.storeName
                                                }
                                            </div>
                                            <div><span className="price">  ￥{item.price}</span>
                                                <span className="sale">销量{item.sales}件</span></div>
                                        </div>
                                    </div>
                                )
                            })
                        }
                    </div>
                </div>

            </div>
        )
    }
    async componentDidMount() {
        let res = await getHotcate()
        let res2 = await getHotList()
        this.setState({
            hotcate: res.data.data,
            hotlist: res2.data.data.list
        })
    }
}
export default WithRouter(Search1);